<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>WebSocket</title>
        <style>
</style>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item { list-style-type: none; } .task-list-item-checkbox { margin-left: -20px; vertical-align: middle; }
</style>
        
        <script src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script>
        
    </head>
    <body class="vscode-light">
        <h1 id="websocket">WebSocket</h1>
<ol>
<li>HTML提出的一种新协议，采用全双工（同时双向）。</li>
<li>解决通信效率低。</li>
<li>长链接</li>
<li>spring weebsocket 坐标</li>
<li>socketjs</li>
<li>协议：ws://</li>
</ol>
<h2 id="入门-基于spring的简单使用">入门， 基于Spring的简单使用</h2>
<h3 id="首先在pom文件引入spring-boot-starter-websocket等依赖">首先在POM文件引入spring-boot-starter-websocket等依赖。</h3>
<h3 id="使用步骤">使用步骤:</h3>
<p>使用步骤：2、创建WebSocket服务端。
核心思路：</p>
<p>① 通过注解@ServerEndpoint来声明实例化WebSocket服务端。
② 通过注解@OnOpen、@OnMessage、@OnClose、@OnError 来声明回调函数。
事件类型	WebSocket服务端注解	事件描述
open	@OnOpen	当打开连接后触发
message	@OnMessage	当接收客户端信息时触发
error	@OnError	当通信异常时触发
close	@OnClose	当连接关闭时触发</p>
<pre><code class="language-java"><div><span class="hljs-meta">@Configuration</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">WebSocketConfig</span> </span>{
    <span class="hljs-meta">@Bean</span>
    <span class="hljs-function"><span class="hljs-keyword">public</span> ServerEndpointExporter <span class="hljs-title">serverEndpointExporter</span><span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> ServerEndpointExporter();
    }
}

<span class="hljs-meta">@Component</span>
<span class="hljs-meta">@ServerEndpoint</span>(<span class="hljs-string">"/chat"</span>)<span class="hljs-comment">//标记此类为服务端</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">WebSocketChatServer</span> </span>{
    <span class="hljs-comment">/**
     * 全部在线会话  PS: 基于场景考虑 这里使用线程安全的Map存储会话对象。
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> Map&lt;String, Session&gt; onlineSessions = <span class="hljs-keyword">new</span> ConcurrentHashMap&lt;&gt;();
    <span class="hljs-comment">/**
     * 当客户端打开连接：1.添加会话对象 2.更新在线人数
     */</span>
    <span class="hljs-meta">@OnOpen</span>
    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onOpen</span><span class="hljs-params">(Session session)</span> </span>{
        onlineSessions.put(session.getId(), session);
        sendMessageToAll(xxxx);
    }
    <span class="hljs-comment">/**
     * 当客户端发送消息：1.获取它的用户名和消息 2.发送消息给所有人
     * &lt;p&gt;
     * PS: 这里约定传递的消息为JSON字符串 方便传递更多参数！
     */</span>
    <span class="hljs-meta">@OnMessage</span>
    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onMessage</span><span class="hljs-params">(Session session, String jsonStr)</span> </span>{
        Message message = JSON.parseObject(jsonStr, Message.class);
        sendMessageToAll(xxxx);
    }
    <span class="hljs-comment">/**
     * 当关闭连接：1.移除会话对象 2.更新在线人数
     */</span>
    <span class="hljs-meta">@OnClose</span>
    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onClose</span><span class="hljs-params">(Session session)</span> </span>{
        onlineSessions.remove(session.getId());
        sendMessageToAll(xxxx);
    }
    <span class="hljs-comment">/**
     * 当通信发生异常：打印错误日志
     */</span>
    <span class="hljs-meta">@OnError</span>
    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onError</span><span class="hljs-params">(Session session, Throwable error)</span> </span>{
        error.printStackTrace();
    }
    <span class="hljs-comment">/**
     * 公共方法：发送信息给所有人
     */</span>
    <span class="hljs-function"><span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">sendMessageToAll</span><span class="hljs-params">(String msg)</span> </span>{
        <span class="hljs-keyword">try</span> {
            session.getBasicRemote().sendText(msg);
        } <span class="hljs-keyword">catch</span> (IOException e) {
            e.printStackTrace();
        }
    }
}
</div></code></pre>
<h3 id="前台使用步骤">前台使用步骤：</h3>
<p>使用步骤：1、获取WebSocket客户端对象。
/**</p>
<ul>
<li>WebSocket客户端 PS：URL开头表示WebSocket协议 中间是域名端口 结尾是服务端映射地址</li>
<li>var url = &quot;ws://&quot;+document.location.host+&quot;${base}/websocket/test&quot;; 提示用法
**/
例如： var webSocket = new WebSocket(url);</li>
</ul>
<p>使用步骤：2、获取WebSocket回调函数。
例如：webSocket.onmessage = function (event) {console.log('WebSocket收到消息：' + event.data);</p>
<p>事件类型	WebSocket回调函数	事件描述
open	webSocket.onopen	当打开连接后触发
message	webSocket.onmessage	当客户端接收服务端数据时触发
error	webSocket.onerror	当通信异常时触发
close	webSocket.onclose	当连接关闭时触发
使用步骤：3、发送消息给服务端
例如：webSokcet.send(jsonStr) 结合实际场景 本案例采用JSON字符串进行消息通信。</p>

    </body>
    </html>